<template>
  <div class="label-box-content" v-cloak>
    <el-row :gutter="20" type="flex" v-cloak>
      <el-col :span="rightShow ? 6 : 8">
        <!-- 会话列表 -->
        <Concat ref="rMg" :aviTab.sync="aviTab" @onClickList="onClickChatList"></Concat>
      </el-col>
      <el-col :span="rightShow ? 10 : 15">
        <!-- 聊天组件 -->
        <Chat2 @readMessage="readMessage" :imRoomInfo='imRoomInfo' v-if="aviTab == 1 || aviTab == 2"></Chat2>
        <Chat @readMessage="readMessage" :imRoomInfo='imRoomInfo' v-else></Chat>
      </el-col>
      <el-col style="position: relative;" :span="rightShow ? 8 : 1">
        <div class="left_icon" v-show="!rightShow" @click="rightShow = !rightShow">
          《&nbsp;
        </div>
        <div class="search_cont" v-show="rightShow">

          <!-- 历史记录 -->
          <NewCard style="background-color: #fff; position: relative; padding-left:20px">
            <div class="left_icon left_icon2" @click="rightShow = !rightShow">
              &nbsp;》
            </div>
            <template slot="title" class="cut-menu">
              <el-radio-group v-model="showSearch" style="border-radius: 10px">
                <el-radio-button :label="1">搜索</el-radio-button>
                <el-radio-button :label="2">成员</el-radio-button>
                <el-radio-button :label="3">推荐</el-radio-button>
              </el-radio-group>
            </template>
            <ChatMessage v-show="showSearch == 1" :type="aviTab" :currentChat="imRoomInfo"></ChatMessage>
            <ChatSetting2 v-show="showSearch == 2" :currentChat="imRoomInfo"></ChatSetting2>
            <!-- <ChatSetting v-show="showSearch == 2 && aviTab != 1"></ChatSetting>
            <ChatSetting2 v-show="showSearch == 2 && aviTab == 1" :currentChat="imRoomInfo"></ChatSetting2> -->
            <ChatRecommend v-show="showSearch == 3"></ChatRecommend>
          </NewCard>
        </div>
      </el-col>
    </el-row>
    <!-- <div class="default-content" v-else v-cloak>
      <div class="tishi">
        <img
          src="@/assets/images/wql_img.png"
          style="width: 150px; height: 150px"
          alt=""
        />
        <p class="one">暂无沟通群聊</p>
        <p class="two">
          咨询和项目下单成功后，会和交付专家生成一个即时沟通的群聊
        </p>
        <div class="btn">
          <routerLink to="/Bm-Consult/1544493113646575616">
            <el-button @click="consult" round>咨询问题</el-button>
          </routerLink>
          <routerLink to="/Bm-project/1542799409863524352">
            <el-button @click="entrust" round>项目委托</el-button>
          </routerLink>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { getMessageList } from "@/BMViews/api/upload/index.js";
import VueCropper from "vue-cropper";
import NewCard from "@/wss/components/newCard.vue";
import Chat from "@/BMViews/views/userCenter/messageCenter/Chat.vue";
import Concat from "@/BMViews/views/userCenter/messageCenter/Concat.vue";
import ChatSetting from "@/BMViews/views/userCenter/messageCenter/Chatsetting.vue";
import ChatMessage from "@/BMViews/views/userCenter/messageCenter/ChatMessage.vue";
import ChatRecommend from "@/BMViews/views/userCenter/messageCenter/ChatRecommend.vue";
//私聊聊天记录
import Chat2 from "@/BMViews/views/userCenter/messageCenter/im/ChatIm.vue";
import ChatSetting2 from "@/BMViews/views/userCenter/messageCenter/im/Chatsetting.vue";
export default {
  components: {
    NewCard,
    VueCropper,
    Chat,
    Concat,
    ChatSetting,
    ChatMessage,
    ChatRecommend,
    Chat2,
    ChatSetting2,
  },

  data() {
    return {
      //聊天左侧选项卡切换
      aviTab:1,
      // 设置与内容搜索的切换
      showSearch: 1,
      totalList: [],
      //当前聊天室信息
      imRoomInfo:{},
      //当前私聊用户信息
      rightShow: false,
    };
  },
  created() {
    // this.getTotalUnReads();
  },
  mounted() {},
  methods: {
    readMessage() {
      this.$refs.rMg.readMessage();
    },
    // 获取所有的列表数据
    async getTotalUnReads() {
      const { code, data } = await getMessageList({
        pageNum: 1,
        pageSize: 10,
      });
      this.totalList.push(...data.rows);
      // console.log(this.totalList);
    },

    // 咨询项目
    consult() {
      // console.log(this.$router, "---------------------路由");
      // this.$router.push({ name: "/Bm-Consult", });
    },
    // 项目委托
    entrust() {},
    //点击聊天室列表
    onClickChatList(item){
      console.log('获取列表点击事件',item);
      this.imRoomInfo = JSON.parse(JSON.stringify(item));
    },
  },
  watch: {},
};
</script>

<style scoped>
/* 图片下载按钮 */
::v-deep .el-image-viewer__actions__inner {
  cursor: pointer;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
* {
  margin: 0;
  padding: 0;
}
[v-cloak] {
  display: none !important;
}
::v-deep .top {
  margin: 0 16px;
}

.search_cont >>> .top .left h1 b{
  width: calc(100% - 20px);
}

ul li {
  list-style: none;
}
.search_cont {
  height: 100%;
  overflow: hidden;
}
.search_cont >>> .el-card__body {
  height: 100%;
}
.search_cont >>> .el-card__body > div {
  height: calc(100% - 65px);
}
.search_cont >>> .el-card__body .top {
  padding: 6px 0 0 0;
}
.default-content {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #ecedf0;
  position: relative;
}

.default-content .tishi {
  /* background-color: pink; */
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.default-content .tishi p {
  text-align: center;
}
.default-content .tishi .one {
  margin-top: 50px;
  color: #2e405e;
  font-weight: 700;
  font-size: 16px;
}
.default-content .tishi .two {
  margin-top: 22px;
  color: #73839e;
  font-size: 16px;
}
::v-deep .tishi .el-button + .el-button {
  margin-left: -40px;
}
::v-deep .default-content .tishi .btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 52px;
}

::v-deep .tishi .el-button {
  width: 40%;
  border: 1px solid #f87a23;
  color: #f87a23;
  margin-top: 10px;
  margin-bottom: 25px;
  transform: translateX(10%);
  margin-left: -40px;
  background-color: #fff;
}

::v-deep .tishi .el-button:hover {
  color: #fff;
  background-color: #f87a23;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #f87a23;
  border-color: #f87a23;
}

/* 切换的按钮标题 */
::v-deep .search_cont .el-radio-group {
  /* active-text-color: "#F87A23";
   */
  border-radius: 10px;
  width: 100%;
}
::v-deep .search_cont .el-radio-group .el-radio-button{
  width: 33%;
}

::v-deep .search_cont .el-radio-button__orig-radio + .el-radio-button__inner {
  background-color: #f0f2f5;
  width: 100%;
}
::v-deep .search_cont .el-radio-button__orig-radio + .el-radio-button__inner:hover {
  color: #f87a23;
}
::v-deep .search_cont .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #fff;
  border-color: #f0f2f5;
  color: #f87a23;
  font-weight: 700;
  box-shadow: none;
}

/* 滚动条 */
::-webkit-scrollbar {
  /* display: none; */
  /*滚动条整体样式*/
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  /* height: 5px; */
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  /* -webkit-box-shadow: inset 0 0 5px rgba(248, 245, 245, 0.2); */
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); */
  border-radius: 0;
  /* background: rgba(0, 0, 0, 0); */
}
</style>

<style scoped>
/* 响应式 */
@media (max-width: 1240px) {
  ::v-deep .el-radio-button__orig-radio + .el-radio-button__inner {
    padding: 9px 25px;
  }
}
@media (max-width: 1044px) {
  ::v-deep .el-radio-button__orig-radio + .el-radio-button__inner {
    padding: 9px 20px;
  }
}
@media (max-width: 954px) {
  ::v-deep .el-radio-button__orig-radio + .el-radio-button__inner {
    padding: 9px 14px;
  }
}
@media (max-width: 847px) {
  ::v-deep .el-radio-button__orig-radio + .el-radio-button__inner {
    padding: 9px 12px;
  }
}
.left_icon{
  position: absolute;
  z-index: 999;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0 10px;
  left:0;
  top:0;
  border:1px solid #e6ebf5;
  background-color: #FFFFFF;
  border-radius: 12px;
  color:#999
}
.left_icon2{
  border:0;
  background: none;
}
</style>
